<template>
	<div class="w-full h-[100px] flex flex-row border-t-[1px] border-solid border-gray-300">
		<div v-for="item in tabbarList" :key="item.index" @click="changeTabbar(item.index)" 
		class="basis-1/3 text-center flex flex-col justify-center items-center">
			<div :class="[item.iconClass, tabbarIndex === item.index ? 'icon-active' : '', 'iconfont', 'icon']"></div>
			<div :class="[tabbarIndex === item.index ? 'icon-active' : '', 'text-[15px]']">{{ item.title }}</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { inject, ref } from 'vue';

	const tabbarIndex = ref(inject('tabbarIndex'));
	const emits = defineEmits(['tabbarChange']);
	const tabbarList = [
		{
			title: '首页',
			index: 1,
			iconClass: 'icon-elment',
		},
		{
			title: '订单',
			index: 2,
			iconClass: 'icon-dingdan',
		},
		{
			title: '我的',
			index: 3,
			iconClass: 'icon-wode',
		},
	];
	const changeTabbar = (index: number) => {
		tabbarIndex.value !== index && emits('tabbarChange', index);
	};
</script>
<style scoped>
	.icon {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 40px;
	}
	.icon-active {
		color: #008aff;
	}
</style>
